<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
  <meta http-equiv="Pragma" content="no-cache" />
  <meta http-equiv="Expires" content="0" />

  <style type="text/css"> 
    html { height: 100% } 
    body { height: 100%; margin: 0px; padding: 0px } 
    #map_canvas { height: 100% } 
  </style>

  <script>
    var map = null;
    var mapOptions = null;
    var trafficLayer = null;
    var transitLayer = null;
    var bicyclingLayer = null;
    var kmlLayer = null;
	var itemsArr['markers'] = [];
  </script>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <script type="text/javascript" src="transform.js" charset="utf-8"></script>
  <script type="text/javascript" src="map.js" charset="utf-8"></script>
  <script type="text/javascript" src="latlngbounds.js" charset="utf-8"></script>
  <script type="text/javascript" src="markers.js" charset="utf-8"></script>

  <script type="text/javascript">  // 
    function doMap() {
      /*mapOptions = {
                    center: new google.maps.LatLng(0,0),
                    zoom: 8                   
                   };*/
      map = new google.maps.Map(document.getElementById("googleMap"), mapOptions);
      
      mapAssignEvents();
    }

    $.fn.serializeObject = function() {
      var o = {};
      var a = this.serializeArray();
      $.each(a, function() {
        if (o[this.name]) {
          if (!o[this.name].push) {
            o[this.name] = [o[this.name]];
          }
          o[this.name].push(this.value || '');
        } 
        else {
          o[this.name] = this.value || '';
        }
      }
      );
      return o;
    };

    function getFormToJson() {
      var jsonStr = 
              '{' + 
              '"eventsMap":' + JSON.stringify($("#eventsMap").serializeObject()) + ',' +
              '"llbResults":' + JSON.stringify($("#llbResults").serializeObject()) + 
              '}';
      console.log(jsonStr);
          
      if (jsonStr.length >= 1) {
        window.chrome.webview.postMessage(jsonStr);
      }
      else {
        window.chrome.webview.postMessage("");
      }
    }
  </script>
  
</head>

<body>
<!--
  <p>
    <button onclick="setMapOptions('#00FF00',42.539898,1.578505,false,true,true,'','',false,'cpRIGHT_TOP','ghAuto',0,true,true,true,'mtHYBRID;mtROADMAP;mtTERRAIN','cpTOP_RIGHT','mtcDROPDOWN_MENU','mtROADMAP',0,0,false,0,0,0,0,false,false,true,'cpTOP_LEFT',true,'scsDEFAULT',true,'cpTOP_LEFT',0,10,true,'cpTOP_LEFT');">SetOptions</button>
    <button onclick="doMap()">DoMap</button>
    <button onclick="ShowLayers(false,false,false,true)">Layers On</button>
    <button onclick="ShowLayers(false,false,false,false)">Layers Off</button>
  </p>
-->
  
  <form action="#" id="eventsMap" name="eventsMap"> 
    <input type="hidden" id="eventsMapEventFired" name="eventsMapEventFired" value="0"/> 

    <input type="hidden" id="eventsMapLat" name="eventsMapLat" value="0"/> 
    <input type="hidden" id="eventsMapLng" name="eventsMapLng" value="0"/> 
    <input type="hidden" id="eventsMapX" name="eventsMapX" value="0"/> 
    <input type="hidden" id="eventsMapY" name="eventsMapY" value="0"/> 
    <input type="hidden" id="eventsMapCenterChange" name="eventsMapCenterChange" value="0"/> 
    <input type="hidden" id="eventsMapClick" name="eventsMapClick" value="0"/> 
    <input type="hidden" id="eventsMapContextmenu" name="eventsMapContextmenu" value="0"/> 
    <input type="hidden" id="eventsMapDblclick" name="eventsMapDblclick" value="0"/> 
    <input type="hidden" id="eventsMapMouseMove" name="eventsMapMouseMove" value="0"/> 
    <input type="hidden" id="eventsMapMouseOut" name="eventsMapMouseOut" value="0"/> 
    <input type="hidden" id="eventsMapMouseOver" name="eventsMapMouseOver" value="0"/> 

    <input type="hidden" id="eventsMapDrag" name="eventsMapDrag" value="0"/> 
    <input type="hidden" id="eventsMapDragEnd" name="eventsMapDragEnd" value="0"/> 
    <input type="hidden" id="eventsMapDragStart" name="eventsMapDragStart" value="0"/> 

    <input type="hidden" id="eventsMapMapTypeId" name="eventsMapMapTypeId" value=""/> 
    <input type="hidden" id="eventsMapMapTypeId_changed" name="eventsMapMapTypeId_changed" value="0"/> 

    <input type="hidden" id="eventsMapTilesLoaded" name="eventsMapTilesLoaded" value="0"/> 

    <input type="hidden" id="eventsMapSwLat" name="eventsMapSwLat" value="0"/> 
    <input type="hidden" id="eventsMapSwLng" name="eventsMapSwLng" value="0"/> 
    <input type="hidden" id="eventsMapNeLat" name="eventsMapNeLat" value="0"/> 
    <input type="hidden" id="eventsMapNeLng" name="eventsMapNeLng" value="0"/> 
    <input type="hidden" id="eventsMapBoundsChange" name="eventsMapBoundsChange" value="0"/> 

    <input type="hidden" id="eventsMapZoom" name="eventsMapZoom" value="0"/> 
    <input type="hidden" id="eventsMapZoomChanged" name="eventsMapZoomChanged" value="0"/> 
  </form> 

  <form action="#" id="llbResults" name="llbResults"> 
    <input type="hidden" id="llbResultsMapisnull" name="llbResultsMapisnull" value="0"/> 
    <input type="hidden" id="llbResultsBoolVal" name="llbResultsBoolVal" value="0"/> 
    <input type="hidden" id="llbResultsSwLat" name="llbResultsSwLat" value="0"/> 
    <input type="hidden" id="llbResultsSwLng" name="llbResultsSwLng" value="0"/> 
    <input type="hidden" id="llbResultsNeLat" name="llbResultsNeLat" value="0"/> 
    <input type="hidden" id="llbResultsNeLng" name="llbResultsNeLng" value="0"/> 
    <input type="hidden" id="llbResultsLat" name="llbResultsLat" value="0"/> 
    <input type="hidden" id="llbResultsLng" name="llbResultsLng" value="0"/> 
  </form> 
 
  <div id="googleMap" style="width:100%;height:100%;"></div>


  <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=API_VER&key=API_KEY&region=API_REGION&language=API_LAN"></script>

  <form action="#" id="eventsMap" name="eventsMap">
    <input type="hidden" name="test" value="0"/>
  </form> 
  

</body>
</html>
